<template>
  <el-drawer class="theme" :visible.sync="visible"
   :with-header="false" :modal="false" size="20%">
    <el-form class="theme-content">
      <h2 class="theme-content__title primay-background-color">布局设置</h2>
      <form-content ref="userInfoForm" :formOptions="formOptions" :formSource="formSource" @changeHandle="changeHandle">
      </form-content>
    </el-form>
  </el-drawer>
</template>

<script>
import FormContent from '@/components/common/form-content'
export default {
  components: {
    FormContent
  },
  props: {
    size: {
      type: String,
      default: 'mini'
    }
  },
  data() {
    return {
      visible: false,
      formOptions: {
        inline: true,
        labelPosition: 'left',
        labelWidth: '100px',
        labelSuffix: '',
        size: this.size
      },
      formSource: {
        operations: [
          {
            name: '导航条类型',
            key: 'navbarLayoutType',
            type: 'radio',
            width: '200px',
            list: [
              {
                key: 'default',
                value: '默认'
              },
              {
                key: 'inverse',
                value: '深色'
              }
            ]
          },
          {
            name: '侧边栏皮肤',
            key: 'sidebarLayoutSkin',
            type: 'radio',
            width: '200px',
            list: [
              {
                key: 'light',
                value: '浅色'
              },
              {
                key: 'dark',
                value: '黑色'
              }
            ]
          },
          {
            name: '控 件 大 小',
            key: 'controlSize',
            type: 'radio',
            width: '200px',
            list: [
              {
                key: 'mini',
                value: '小'
              },
              {
                key: 'small',
                value: '中'
              },
              {
                key: 'medium',
                value: '大'
              }
            ]
          }
        ],
        ruleForm: {
          navbarLayoutType: this.$store.getters.navbarLayoutType,
          sidebarLayoutSkin: this.$store.getters.sidebarLayoutSkin,
          controlSize: this.$store.getters.controlSize
        }
      }
    }
  },
  methods: {
    changeHandle(obj) {
      let data = obj.backData
      let value = this.formSource.ruleForm[data.key]
      if (data.key === 'navbarLayoutType') {
        this.$store.commit('common/SET_NAVBARLAYOUTTYPE', value)
      } else if (data.key === 'sidebarLayoutSkin') {
        this.$store.commit('common/SET_SIDEBARLAYOUTSKIN', value)
      } else if (data.key === 'controlSize') {
        this.$store.commit('system/SET_CONTROLSIZE', value)
      }
    }
  }
}
</script>

<style lang="scss">
.theme {
  .el-drawer {
    &:focus {
      outline: 0;
    }
  }
}
</style>
<style lang="scss" scoped>
.theme {
  &-content {
    &__title {
      margin-top: 0px;
      margin-bottom: 20px;
      line-height: 50px;
      color: aliceblue;
    }
  }
}
</style>
